<template>
  <el-row :gutter="0">
    <el-col :span="9" :xs="2"> </el-col>
    <el-col :xs="20" :span="6">
      <div class="logo">
        <el-avatar :size="100" :src="logoImage" />
      </div>
      <el-card class="login-box">
        <!-- 账号登录 ------------------------------------------------------------------------------->
        <div v-show="'normal'==loginType">
          <div class="input1">
            <el-input v-model="name" placeholder="用户名/手机号" clearable size="large" maxlength="20" />
          </div>
          <div class="input2">
            <el-input v-model="password" placeholder="密码" clearable size="large" maxlength="20"
              type="password" />
          </div>
        </div>
        <!-- 手机号登录 ---------------------------------------------------------------------------------->
        <div v-show="'phoneLogin'==loginType">
          <div class="input1">
            <el-input v-model="phone" placeholder="手机号" clearable size="large" maxlength="11">
              <template #prepend>+86</template>
            </el-input>
          </div>
          <div class="input2">
            <el-input v-model="code" placeholder="验证码" size="large" maxlength="4">
              <template #append>
                <el-button v-show="!codeTimeShow" @click="getPhoneCode">获取验证码</el-button>
                <span v-show="codeTimeShow">{{codeTime}}</span>
              </template>
            </el-input>
          </div>
          <div style="font-size:14px" @click="changeLoginType ('normal')">返回账号登陆</div>
        </div>
        <!-- -------------------------------------------------------------------------------------- -->
        <div class="input3">
          <el-avatar :size="30" :src="phoneImage" @click="changeLoginType('phoneLogin')" />
          &nbsp;&nbsp;
          <el-avatar :size="30" :src="wechatImage" />&nbsp;&nbsp;
          <el-avatar :size="30" :src="QQImage" />
        </div>
        <!-- --------------------------------------------------------------------------------------------- -->
        <div class="input4">
          <el-button type="primary" @click="login" size="large">登录</el-button>
          <el-button type="info" size="large" @click="toRegister">注册</el-button>

          <div class="find" @click="changeLoginType('phoneLogin')"> 忘记密码?</div>

        </div>
      </el-card>
    </el-col>
    <el-col :span="9" :xs="2"> </el-col>
  </el-row>
</template>

<script>
import phoneImage from "@/assets/imge/inco/phone.png";
import logoImage from "@/assets/imge/inco/logo.png";
import QQImage from "@/assets/imge/inco/QQ.png";
import wechatImage from "@/assets/imge/inco/wechat.png";
import { ElMessage } from 'element-plus';
export default {
  name: "GLogin",
  data () {
    return {
      name: "",
      phone: "",
      password: "",
      loginType: "normal",
      code: "",
      codeTime: 60,
      codeTimeShow: false,
      phoneImage: phoneImage,
      logoImage: logoImage,
      QQImage: QQImage,
      wechatImage: wechatImage,
      ElMessage: ElMessage,
    };
  },
  computed: {
    changeTime: function () {
      if (this.codeTime < 1) {
        console.log("停止");
      }
      return this.codeTime - 1;
    }
  },
  methods: {
    //登陆
    login () {
      switch (this.loginType) {
        case "normal": this.normalLogin(); break;
        case "phoneLogin": this.phoneLogin(); break;
        default: break;
      }
    },
    //账号登陆
    normalLogin () {
      console.log("执行登陆");
      const params = new URLSearchParams();
      params.append('name', this.name);
      params.append('password', this.password);
      this.$axios.post('/user/login', params).then((res) => {
        if (res.flag) {
          this.$cookies.set('token', res.data.token);
          this.$cookies.set('userId', res.data.userId);
          this.$cookies.set('headImage', res.data.headImage);
          this.$router.back();
        }
      })
    },
    //手机号登录
    phoneLogin () {
      const params = new URLSearchParams();
      params.append('phone', this.phone);
      params.append('code', this.code);
      this.$axios.post('/user/smslogin', params).then((res) => {
        if (res.flag) {
          this.$cookies.set('token', res.data.token);
          this.$cookies.set('userId', res.data.userId);
          this.$cookies.set('headImage', res.data.headImage);
          this.$router.back();
        }
      })
    },
    //发送验证码
    getPhoneCode () {
      const params = new URLSearchParams();
      params.append('phone', this.phone);
      this.changeCodeTime();
      this.$axios.post('/user/smscode', params).then((res) => {
        if (res.flag) {
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'success',
            duration: 3000,
          })
        }
      })
    },

    changeLoginType (type) {
      this.loginType = type;
    },

    //验证码倒计时
    changeCodeTime () {
      this.codeTime = 60;
      this.codeTimeShow = true;
      let that = this;
      let codeclock = setInterval(function () {
        that.codeTime--;
        if (that.codeTime < 1) {
          that.codeTimeShow = false;
          clearInterval(codeclock);
        }
      }, 1000);
    },

    toRegister () {
      this.$router.push("/register");
    }
  }
};
</script>

<style scoped>
.logo {
  position: absolute;
  left: calc(50% - 50px);
  z-index: 99;
  top: 100px;
}
.login-box {
  position: relative;
  margin-top: 150px;
  text-align: center;
}
.input1,
.input2,
.input3,
.input4 {
  padding: 10px;
  margin: 0 auto;
  width: 90%;
}
.input1 {
  margin-top: 50px;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.find {
  margin-top: 10px;
  font-size: 13px;
}
</style>